<template>
    <div class="product-wrap">
        <web-header :selectnum="1"></web-header>
        <div class="product-container">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>贷款产品</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="filter">
                <div class="title">贷款产品</div>
                <div @click="findBtn" class="filter-btn f-btn">查询</div>
            </div>
            <div class="filter-wrap">
                <div class="filter-item medium">
                    <div class="fliter-list">
                        <span class="label">贷款额度：</span><el-input  v-model="loanFundMin"></el-input> ~ &nbsp;
                    </div>
                    <div class="fliter-list">
                        <el-input  v-model="loanFundMax"></el-input>万元
                    </div>
                </div>
                <div class="filter-item mini">
                    <span class="label">贷款适用地区：</span>
                    <el-select  filterable width="10" @change="provinceChange" v-model="regProvinceCode" placeholder="请选择" style="margin-right: 20px">
                        <el-option
                        label="全部"
                        value="">
                        </el-option>
                        <el-option
                            v-for="item in addressArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                        </el-option>
                    </el-select>
                    <el-select  filterable width="10"  v-model="regCityCode" placeholder="请选择">
                        <el-option
                        label="全部"
                        value="">
                        </el-option>
                        <el-option
                            v-for="item in cityArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </div>
                <div class="filter-item max">
                    <span class="label">贷款者盈利要求：</span>
                    <el-select  v-model="applyProfit" placeholder="请选择">
                        <el-option
                        label="全部"
                        value="">
                        </el-option>
                        <el-option
                        label="盈利"
                        value="y">
                        </el-option>
                        <el-option
                        label="无要求"
                        value="n">
                        </el-option>
                    </el-select>
                </div>
                <div class="filter-item">
                    <span class="label">资金主体：</span>
                    <el-select  filterable width="10" v-model="fundBody" placeholder="请选择">
                        <el-option
                            label="全部"
                            value="">
                        </el-option>
                        <el-option
                            v-if="item.value == '银行'"
                            v-for="item in fundArr"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div v-if="dataList.length" class="product-item">
                <div class="product-list" @click="linkTo('/productDetail',item.id)" v-for="(item,index) in dataList" :key="index">
                    <img :src="item.photoFiles.length?item.photoFiles[0].fileUrl:''" alt="">
                    <div class="list-info">
                        <div class="title over-hidden">{{item.productName}}</div>
                        <div class="date">{{item.gmtCreated}}</div>
                        <div class="list-line over-hidden">
                            <div class="line-item"><span>贷款额度：</span>{{item.loanFundMin+' 万元'+' ~ '+item.loanFundMax+' 万元'}}</div>
                            <div class="line-item"><span>贷款最高期限：</span>{{item.investYearDesc}}</div>
                            <div class="line-item"><span>贷款年化利率：</span>{{item.minReportRate}}%/年</div>
                            <div class="line-item"><span>资金主体：</span>{{returnBody(item.fundBodyDatas)}}</div>
                        </div>
                        <div class="list-line">
                            <div class="line-item"><span>贷款适用地区：</span>{{returnArrName(item.areaDatas)}}</div>
                            <div class="line-item"><span>申请者最低成立年限：</span>{{item.applyMixYear + '年'}}</div>
                            <div class="line-item"><span>申请者盈利要求：</span>{{item.applyProfit == 'y'?'需盈利':'无要求'}}</div>
                            <div class="line-item"><span>申请者最低营业收入要求：</span>{{item.applyMixIncome}}</div>
                        </div>
                        <div :class="item.hadApply  == 'y'?'applyed':''" class="btn f-btn">{{item.hadApply  == 'y'?'已申请':'申请'}}</div>
                    </div>
                </div>
                <div class="pagation-block">
                    <el-pagination 
                        @current-change="pageSizeChange" 
                        :current-page="pageIndex"
                        :page-size="5"
                        layout="pager" :total="pageCount">
                    </el-pagination>
                    
                </div>      
            </div>
            <div v-if="!dataList.length" class="no-data">产品数据为空</div>
        </div>  
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <div class="product-line">您将申请产品{{productName}},请确认</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="success" @click="confrimBtn">确 定</el-button>
            </span>
        </el-dialog>
        <web-footer separatorshow=0></web-footer>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
export default {
    data() {
        return {
            centerDialogVisible:false,
            productName:'',
            id:'',
            pageIndex:1,
            financeLevel:'',
            firstIndustry:'',
            thirdIndustry:'',
            fundBody:'',
            investType:'',
            investYear:'',
            regCityCode:'',
            regProvinceCode:'',
            secondIndustry:'',
            singleInvestFund:'',
            minReportRange:'',
            applyProfit:'',
            dataList:[],
            industryArr:[],
            singleArr:[],
            investTypeArr:[],
            fundArr:[],
            financeArr:[],
            investArr:[],
            secondArr:[],
            thirdArr:[],
            addressArr:[],
            cityArr:[],
            loanFundMax:'',
            loanFundMin:'',
            singleInvestMoneyList:[],
            minArr:[
                {
                    key:'min_3',
                    value:'3-5%'
                },
                {
                    key:'min_5',
                    value:'5-8%'
                },
                {
                    key:'min_8',
                    value:'8-12%'
                },
                {
                    key:'min_12',
                    value:'12%以上'
                }
            ],
            pageCount:0
        }
    },
    components: {
        'web-header':() => import('../common/web-header'),
        'web-footer':() => import('../common/web-footer')
    },  
    mounted(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.getProductPage()
        this.getIndustry()
        this.getSingle()
        this.getInvestType()
        this.getFundArr()
        this.getFinanceArr()
        this.getInvestArr()
        this.getMoneyList()
        if(localStorage.getItem("address")){
            this.addressArr = JSON.parse(localStorage.getItem("address"))
        }else{
            this.getProvince()
        }
    },
    methods:{
        returnPrice(num){
            return common.returnNum(num)
        },
        returnArrName(arr){
            let arr1 = []
            arr.map( (item, index) => {
                let itemArea = "";
                if (item.financingProvinceName) {
                    itemArea = item.financingProvinceName
                }
                if (item.financingCityName) {
                    itemArea = item.financingProvinceName+item.financingCityName
                }
                if (item.financingDistrictName) {
                    itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                }
               arr1.push(itemArea)
            })
            return arr1.join(';')
        },
        linkTo(link,id){
            this.$router.push({path: link, query: {id: id}})
        },
        applyBtn(id,name){
            this.centerDialogVisible = true;
            this.productName = name;
            this.id = id;
        },
        returnBody(data){
            let arr = []
            data.map((item)=>{
                arr.push(item.fundBodyDesc)
            })
            return  arr.length?arr.join(','):'--'
        },
        confrimBtn(){
                let  url = CONSTANT.URL.SYSTEM.APPLYPRODUCT,
                data = {productId:this.id},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    this.centerDialogVisible = false;
                    if(res.status == 200){
                        this.$message({
                            message: '申请成功！',
                            type: 'success'
                        });
                    }else{
                        this.$message.error(res.msg);
                    }
                })
        },
        firstChange(e){
            this.secondIndustry = ''
            this.industryArr.map((item)=>{
                if(e == item.key){
                    this.secondArr = item.childs
                }
            })
        },
        getProvince(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'province'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.addressArr= res.data.bussData
                    localStorage.setItem("address",JSON.stringify( res.data.bussData));
                }else{
                
                }
            })
        },
        provinceChange(e){
            this.regCityCode = '';
            this.addressArr.map((item)=>{
                if(e == item.key){
                    this.cityArr = item.childs
                }
            })
        },
        secondChange(e){
            this.thirdArr = ''
            this.thirdIndustry = ''
            this.secondArr.map((item)=>{
                if(e == item.key){
                    this.thirdArr = item.childs
                }
            })
        },
        pageSizeChange(val) {
            this.pageIndex = val
            this.getProductPage();
        },
        getProductPage(){
            let  url = CONSTANT.URL.WEB.FINDPRODUCTBYPAGE,
                data = {
                    "financeLevel": this.financeLevel?this.financeLevel:null,
                    "firstIndustry":  this.firstIndustry?this.firstIndustry:null,
                    "fundBody":  this.fundBody?this.fundBody:null,
                    "investType": this.investType?this.investType:null,
                    "investYear": this.investYear?this.investYear:null,
                    "financingCityCode":  this.regCityCode?this.regCityCode:null,
                    "financingProvinceCode":  this.regProvinceCode?this.regProvinceCode:null,
                    "secondIndustry":  this.secondIndustry?this.secondIndustry:null,
                    "singleInvestFund":  this.singleInvestFund?this.singleInvestFund:null,
                    "thirdIndustry":this.thirdIndustry?this.thirdIndustry:null,
                    "minReportRange":this.minReportRange?this.minReportRange:null,
                    "applyProfit":this.applyProfit?this.applyProfit:null,
                    'loanFundMin':this.loanFundMin?this.loanFundMin:null,
                    'loanFundMax':this.loanFundMax?this.loanFundMax:null,
                },
                dataForm = {
                    pageIndex:this.pageIndex,
                    pageSize:5
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.dataList = res.data.bussData;
                        this.pageCount = res.data.count;
                    }else{
                    }
                })
        },
        findBtn(){
            this.pageIndex = 1;
            this.dataList = []
            this.getProductPage()
        },
        getIndustry(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'first_industry'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.industryArr= res.data.bussData
                }else{
                
                }
            })
        },
        getSingle(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'single_invest_fund'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.singleArr= res.data.bussData
                }else{
                
                }
            })
            
        },
        getInvestType(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'invest_type'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.investTypeArr= res.data.bussData
                }else{
                
                }
            })
            
        },
        getFundArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'fund_body'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.fundArr= res.data.bussData
                }else{
                
                }
            })
        },
        getMoneyList(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'single_invest_fund'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.singleInvestMoneyList= res.data.bussData
                }else{
                
                }
            })
        },
        getFinanceArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'finance_level'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.financeArr= res.data.bussData
                }else{
                
                }
            })
        },
        getInvestArr(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'invest_year'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.getInvestArr= res.data.bussData
                }else{
                
                }
            })
        }
    }
}
</script>

<style lang="scss">
.product-wrap{
    .product-container{
        width: 1200px;
        margin: 0 auto;
        padding: 30px 0 50px;
        .filter{
            position: relative;
            margin: 49px 0 0px;
            .title{
                font-size: 24px;
                color: #111;
                font-weight: bold;
            }
            .filter-btn{
                position: absolute;
                right: 0;
                top: -10px;
                width: 100px;
                height: 40px;
                background-color: #ED7018;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                font-size: 18px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear
                }
            }
        }
        .filter-wrap{
            // overflow: hidden;
            display: flex;
            font-size: 16px;
            color: #666;
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 40px;
            flex-wrap: wrap;
            input {
                border: 1px solid #ED7018 !important;
            }
            .filter-item{
                // float: left;
                margin-right: 19px;
                margin-top: 20px;
                width: 500px;
                display: flex;
                align-items: center;
                @media screen and (max-width: 1440px) {
                    margin-top: 25px;
                    .el-input__inner {

                        margin-left: 0 !important;
                        // height: 35px !important;
                    }
                }

                .fliter-list{
                    display: inline-block;
                    .el-input{
                        width: 125px;
                        margin-right: 10px;
                        input{
                            width: 100%!important;
                        }
                    }
                    &.loan{
                        span{
                            /* display: inline-block; */
                        }
                    }
                }
                &.mini{
                   input{
                        // width: 100px!important;
                   } 
                }
                &.max{
                   input{
                        width: 125px!important;
                   } 
                }
                &.medium {
                    input {
                        width: 160px !important;
                    }
                }
            }
            .el-select{
                .el-input{
                    input{
                        width: 140px;
                        // height: 40px;
                        border: 1px solid #D9D9D9;
                        font-size: 14px;
                        color: #333
                    }
                    .el-icon-arrow-up:before {
                        /* background: url(../../../static/dropdown_icon.png); */
                        background: none;
                        content: '\F0D7' !important;
                        font-family: FontAwesome;
                        color: #ED9068;
                        top: 18px;
                        font-size: 22px;
                    }
                }
            }
        }
        .no-data{
            color: #999;
            text-align: center;
            font-size: 20px;
            margin-top: 40px;
        }
        .product-item{
            margin-top: 9px;
            .product-list{
                cursor: pointer;
                margin-top: 30px;
                overflow: hidden;
                border-top: 1px solid #f2f2f2;
                padding-top: 31px;
                &:first-child{
                    border-top: 0px solid #000;
                }
                &:hover img{
                        -webkit-transform: scale(1.04);
                        transform: scale(1.04);
                        filter: alpha(opacity=100);
                        -moz-opacity: 1;
                        -webkit-opacity: 1;
                        -ms-opacity: 1;
                        opacity: 1;  
                    }
                img{
                    float: left;
                    width: 24.167%;
                    height:194px;
                    margin-right: 2.67%;
                    -webkit-transition: opacity .35s,-webkit-transform .35s;
                    transition: opacity .35s,transform .35s;
                    cursor: pointer;
                }
                .btn{
                    position: absolute;
                    right: 0px;
                    top: 90px;
                    width: 100px;
                    height: 40px;
                    background-color: #ED7018;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    font-size: 18px;
                    color: #fff;
                    text-align: center;
                    line-height: 40px;
                    cursor: pointer;
                    &.applyed{
                        background-color: #909399;
                        cursor: inherit;
                        &:hover{
                            background-color: #909399;
                        }
                    }
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    } 
                }
                .list-info{
                    position: relative;
                    float: left;
                    overflow: hidden;
                    width: 73%;
                    .date{
                        position: absolute;
                        right: 0;
                        top: 9px;
                        font-size: 14px;
                        color: #999;
                    }
                    .title{
                        font-size: 18px;
                        color: #111;
                        font-weight: bold;
                        
                    }
                    .list-line{
                        float: left;
                        width:49%;
                        font-size: 16px;
                        color: #111;
                        .line-item{
                            margin-top: 21px;
                        }
                        span{
                            color: #666;
                        }
                        &:last-child{
                            width: 39%;
                        }
                    }
                }
            } 
        }
    }
    .pagation-block{
        margin-top: 50px;
        .el-pagination{
            width: 893px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            .number{
                width: 40px;
                height: 40px;
                padding: 0;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                text-align: center;
                line-height: 40px;
                // color: #D1D1D1;
                font-size: 16px;
                // border: 1px solid #D1D1D1;
                margin-right: 15px;
                background-color: rgba(220, 100, 20, .2) !important;
                border: 1px solid #ED9000;
                color: #ED9000;
                &.active{
                    border: 1px solid #ED7018;
                    color: #ED7018 !important;
                }
            }
            .el-icon.more{
                width: 40px;
                height: 40px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                text-align: center;
                line-height: 40px;
                color: #D1D1D1;
                border: 1px solid #D1D1D1;
                margin-right: 15px;
            }
        }
    }
}

span.label {
    width: 150px;
    display: inline-block;
}
    
</style>
